import Vue from "vue";
import Vuex from "vuex";
import * as permissionApi from "@/api/permission"

//引入递归路由的方法
import recursionRoutes from "@/utils/recursionRoutes"
//引入项目所有的路由
import allRoutes from "@/router/generateRouter"

//引入动态路由
import dynamicRoutes from "@/router/dynamicRoutes"
import router from "@/router"

//引入持久化存储
import createPersistedState from "vuex-persistedstate"

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userMenu:[],
    userInfo:{},  //用户信息
    currentProduct :{} //当前产品的充值对象
  },
  getters: {},
  mutations: {
    //设置用户信息
    SET_MENULIST(state,payload){
      state.userMenu = [...payload]//浅拷贝

      //动态添加路由，引入dynamic路由，进行匹配，匹配到path ==='/' 这个对象，让我们的用户 路由 中的结果成为这个对象的children
      let target = dynamicRoutes.find(route => route.path === "/")

      target.children = [...target.children, ...payload]

      //动态的路由添加到根路由的routes选项中
      //参数是一个对象，这个对象必须符合routes的配置
      router.addRoute(target)

    },
    //修改用户信息
    SET_USERINFO(state,payload){
      state.userInfo = payload
    },
    //设置当前充值的产品
    SET_CURRENT_PRODUCT(state,payload){
     state.currentProduct = payload
    }
  },
  actions: {
    //请求菜单数据，根据菜单数据
    //1.计算出角色（role）的菜单
    //2.计算出当前这个角色的合法路由
    async FETCH_MENULIST(context,payload){
      return permissionApi.getMenuList().then(res =>{
        console.log(res);
        //解构获得后端返回的菜单数据
        let {menuList} = res.data

        //调用递归方法 获得计算的结果
        let userRoutes = recursionRoutes(allRoutes[0].children,menuList)
        console.log(userRoutes);
        //提交给mutation ,让mutation--设置用户菜单 处理
        context.commit('SET_MENULIST',userRoutes)
      })
    }
  },
  modules: {},
   /* vuex数据持久化配置 */
   plugins: [
    createPersistedState({
      // 存储方式：localStorage、sessionStorage、cookies
      storage: window.localStorage,
      // 存储的 key 的key值
      key: "bb",
      paths: ['userInfo', 'currentProduct']
    })
  ]
	
});
